<template>
  <div class="channel-edit">
    <!-- 我的频道单 -->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">我的频道</div>
      <!-- 编辑按钮 -->
      <van-button class="edit-btn" size="mini" round type="danger" plain @click="isEditShow  = !isEditShow"
        >{{isEditShow? '完成':'编辑'  }}
      </van-button>
    </van-cell>
    <!-- 频道宫格 -->
    <!-- gutter间隔 -->
    <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        class="channel-item"
        v-for="(value, index) in myChannels"
        :key="index"
        @click="onMyChannelClick(value,index)"
      >
      <!-- 根据父组件传过来的active 动态显示对应频道的高亮 -->
        <span class="text" :class="{ active: myActive === index }" slot="text">
          {{value.name}}
        </span>
        <!-- 根据编辑状态,动态显示频道上面icon -->
        <van-icon v-show="isEditShow && !index==0" slot="icon" name="close"> </van-icon>
      </van-grid-item>
    </van-grid>
    <!-- 推荐频道单 -->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">推荐频道</div>
    </van-cell>
    <!-- 频道宫格 -->
    <van-grid :gutter="10" class="recommend-grid" >
      <van-grid-item
        class="channel-item"
        icon="plus"
        v-for="channel in recommendChannels"
        :key="channel.id"
        :text="channel.name"
        @click="onAddChannel(channel)"
      />
    </van-grid>
    <!-- 推荐频道单 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'

// 获取所有频道的信息
import { getAllChannelsAPI } from '../../../api/index.js'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array,
      default: () => []
    },
    myActive: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      allChannels: [], // 所有频道
      myChannelsClone: this.myChannels, // 把父组件传过来的 我的频道内容克隆一份
      isEditShow: false // 控制编辑状态

    }
  },
  created () {
    // 获取所有频道
    this.loadAllChannels()
  },
  methods: {
    // 请求所有频道
    async loadAllChannels () {
      try {
        const { data } = await getAllChannelsAPI()
        // console.log(data.data.channels)
        this.allChannels = data.data.channels
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 给每个推荐频道注册的点击事件
    onAddChannel (channel) {
      // console.log(channel)
      // 点击那个推荐频道,就把谁push到我的频道数组中
      this.myChannelsClone.push(channel)
    },
    // 编辑功能,给每个我的频道绑定删除功能
    onMyChannelClick (value, index) {
      // 如果是编辑状态,点击频道就是删除
      // 不能删除推荐
      if (index !== 0) {
        if (this.isEditShow) {
          this.myChannelsClone.splice(index, 1)
          // 2. 让激活频道的索引 - 1
          if (index <= this.myActive) {
            this.$emit('update-active', this.myActive - 1, true)
          }
        } else {
          this.$emit('update-active', index, false)
        }
      }
    }
  },
  computed: {
    ...mapState(['user']),
    // 计算属性会观测内部依赖数据的变化
    // 如果依赖的数据发生变化，则计算属性会重新执行
    // 第一种方法
    recommendChannels () {
      // 数组的 filter 方法：遍历数组，把符合条件的元素存储到新数组中并返回
      const list = this.allChannels.filter(channel => {
        // 数组的 find 方法：遍历数组，把符合条件的第1个元素返回
        return !this.myChannels.find(myChannel => {
          return myChannel.id === channel.id
        })
      })
      return list
    }
    // // 第二种方法
    // recommendChannels () {
    //   return [...this.$_.differenceBy(this.allChannels, this.myChannels, 'id')]
    // }
  }
}

</script>

<style scoped lang="less">
.channel-edit {
  // 设置内边距，不当关闭按钮与 内容重合
  padding-top: 100px;
  box-sizing: border-box;
  // 标题样式
  .title-text {
    height: 100%;
    line-height: 58px;
    font-size: 32px;
    color: #333333;
  }
  //按钮样式
  .edit-btn {
    line-height: 48px;
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  //宫格样式
  .channel-item {
    height: 86px;
    width: 160px;
    /* 设置按钮背景 */
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      /* 设置按钮字体样式 */
      .van-grid-item__text, .text {
        color: #222;
        font-size: 28px;
        margin-top: 0;
      }
        //选中高亮样式
        .active {
        color: red !important;
       }
      .van-grid-item__icon-wrapper{
        position: unset;
      }
    }
  }
  //推荐频道单元格社会中
  /deep/ .recommend-grid {
    .van-grid-item__content {
      white-space: nowrap;
      flex-direction: row;
      /* 设置按钮字体样式 */
      .van-icon-plus {
        font-size: 28px;
        margin-right: 6px;
      }
    }
  }
  //我的频道 关闭的icon
  /deep/ .my-grid {
    .van-grid-item__content {
      .van-icon-close {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }
    }
  }

}
</style>
